<template>
  <div id="bodypage">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/homePage' }"><span id="mainpage">我的主页</span></el-breadcrumb-item>
      <el-breadcrumb-item>个人信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="area">
      <el-descriptions class="margin-top" title="用户个人信息" :column="2" border>
        <template slot="extra">
          <el-button type="success" size="small" v-if="showButton" @click="saveData">保存</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            身份证号
          </template>
          {{userInfo.ID}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user-solid"></i>
            用户名
          </template>
          {{userInfo.NAME}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            电话
          </template>
          <div class="edit"><input ref="inputTel" readonly="readonly" v-model="userInfo.PHONENUM"></input><span
              @click="inputTel" class="update">修改</span></div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-key"></i>
            登录密码
          </template>
          <div class="edit"><input ref="inputPwd" readonly="readonly" v-model="userInfo.PASSWORD"></input><span
              @click="inputPwd" class="update">修改</span></div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-date"></i>
            创建日期
          </template>
          {{userInfo.CREATE_DATE}}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <el-empty :image-size="250" description=" "></el-empty>
  </div>
</template>


<script>
  import { mapState } from 'vuex'
  export default {
    //获取用户信息
    async mounted() {
      let { data } = await this.$axios({
        method: 'post',
        url: '/userInfo/load'
      })
      this.userInfo = data.data[0]
      this.telInTableStatus = data.data[0].PHONENUM
      this.pwdInTableStatus = data.data[0].PASSWORD
    },

    data() {
      return {
        userInfo: {},
        telInTableStatus: '',
        pwdInTableStatus: '',
        showButton: false,
      }
    },
    methods: {
      inputTel() {
        this.$refs.inputTel.removeAttribute("readonly");
        this.$refs.inputTel.focus();
        this.showButton = true;
      },
      inputPwd() {
        this.$refs.inputPwd.removeAttribute("readonly");
        this.$refs.inputPwd.focus();
        this.showButton = true;
      },

      async changePwd() {
        let { data } = await this.$axios({
          method: 'post',
          url: "/userInfo/password",
          data: {
            password: this.userInfo.PASSWORD
          },
        })
        this.$message.success(data.msg)
      },
      async changeTel() {
        let { data } = await this.$axios({
          method: 'post',
          url: "/userInfo/phone",
          data: {
            phone: this.userInfo.PHONENUM
          },
        })
        this.$message.success(data.msg)
      },
      saveData() {
        if (this.pwdInTableStatus != this.userInfo.PASSWORD) {
          this.changePwd();
          this.$refs.inputPwd.setAttribute("readonly", "readonly");
        } else if (this.telInTableStatus != this.userInfo.PHONENUM) {
          this.changeTel();
          this.$refs.inputTel.setAttribute("readonly", "readonly");
        } else {
          this.$message.info("未进行修改");
          this.$refs.inputPwd.setAttribute("readonly", "readonly");
          this.$refs.inputTel.setAttribute("readonly", "readonly")
        }
      }
    },
  }
</script>

<style Lang="less" scoped>
  #area {
    margin: 5% 15%;
  }

  .edit {
    display: flex;
    justify-content: space-between;

  }

  .edit .update {
    color: #5eaefd;
  }

  .edit .update:hover {
    color: #2d93f8;
    cursor: pointer;
  }

  .edit input {
    border: none;
    width: 60%;
    outline: none;
  }

  .edit input:disabled {
    background-color: transparent;
  }
</style>